<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>项目详情</title>
    {% load static %}
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/css/oksub.css">
    <script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
    <script src="/static/lib/layui/layui.js"></script>

   <link type="text/css" rel="stylesheet" href="/static/css/metroStyle.css">
    <link type="text/css" rel="stylesheet" href="/static/css/treeSelectStyle.css">
    <script src="/static/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="/static/js/treeSelect.2.0.js"></script>
    <script type="text/javascript" src="/static/js/xm-select.js"></script>
    <style>
        xm-select .scroll-body {
            padding-left: 10px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="ok-body layui-tab layui-tab-brief" style="padding-top: 0px;" lay-verify="docDemoTabBrief">
    <ul class="layui-tab-title">
    <li class="layui-this">基础信息</li>
    <li>人员配置</li>
    <li>流程监控</li>
    <li>项目附件</li>
  </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="layui-row layui-col-space10">
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">项目名称<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="pro_name" id="pro_name"
                               autocomplete="off"
                               class="layui-input"
                               lay-verify="required" disabled>
                    </div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">关联协议<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="ref_contract" id="ref_contract" autocomplete="off" disabled
                               class="layui-input"
                               lay-verify="required">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space10" style="padding-top: 10px;">
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">项目负责人<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="pro_manager" id="pro_manager" disabled
                               autocomplete="off"
                               class="layui-input"
                               lay-verify="required">
                    </div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">被审计单位<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="pro_audit" id="pro_audit" disabled
                               class="layui-input"
                               lay-verify="required">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space10" style="padding-top: 10px;">
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">签字人一<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="sign_one" id="sign_one" disabled
                               autocomplete="off"
                               class="layui-input"
                               lay-verify="required">
                    </div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">签字人二<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="sign_two" id="sign_two" disabled
                               autocomplete="off"
                               class="layui-input"
                               lay-verify="required">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space10" style="padding-top: 10px;">
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">文号<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="pro_number" id="pro_number" disabled
                               autocomplete="off"
                               class="layui-input"
                               lay-verify="required">
                    </div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">打印份数<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="print_amount" id="print_amount" disabled
                               autocomplete="off"
                               class="layui-input"
                               lay-verify="required">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text" style="padding-top: 10px;">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                <textarea name="remark_describe" id="remark_describe" disabled
                          class="layui-textarea"></textarea>
                    <button type="reset" style="margin-top: 10px;" class="layui-btn layui-btn-primary" name="close">关闭</button>
                </div>

            </div>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form layui-form-pane ok-form">
                <input type="text" name="id" id="id" class="layui-input" style="display: none">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div id="demo1" style="width: 502px;">
                        <div class="layui-form-item" style="padding-top: 10px;">
                            <label class="layui-form-label" style="width: 200px;">是否需要签署独立性申明:</label>
                            <div class="layui-input-block">
                                <input type="radio" name="independence" value="0" title="需要">
                                <input type="radio" name="independence" value="1" title="不需要" checked>
                            </div>
                        </div>
                         <button class="layui-btn" lay-submit lay-filter="pushUser">提交人员数据</button>
                     <button type="reset" class="layui-btn layui-btn-primary" name="close">关闭</button>
                    </div>

                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
    </div>

</div>
<!--js逻辑-->


<script type='text/javascript'>
    let data1;

    function child(d) {
        data1 = d;


    layui.use(["form", "okUtils", "form", "tree", "okLayer","element","transfer"], function () {
        let $ = layui.$;
        let form = layui.form;
        let okUtils = layui.okUtils;
        let okLayer = layui.okLayer;
        let transfer = layui.transfer;
        let tree = layui.tree;
        let util = layui.util;
        let element = layui.element;
        okLoading.close();
        $('#id').val(data1.id);
        $('#pro_name').val(data1.pro_name);
        $('#ref_contract').val(data1.paper_code);
        $('#pro_manager').val(data1.paper_manager);
        $('#pro_audit').val(data1.audit_customer);
        $('#sign_one').val(data1.sign_one);
        $('#sign_two').val(data1.sign_two);
        $('#pro_number').val(data1.pro_number);
        $('#print_amount').val(data1.print_amount);
        $('#remark_describe').val(data1.remark_describe);
        //触发事件
        var active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    , content: '内容' + (Math.random() * 1000 | 0)
                    , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            , tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            , tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };
        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });
        //-----------------------------------------------
        var demo1 = xmSelect.render({
            el: '#demo1',
            name:'user_code',
            autoRow: true,
            filterable: true,
            initValue:data1.user_user,
            layVerify: 'required',
            tree: {
                show: true,
                showFolderIcon: true,
                showLine: true,
                indent: 20,
                expandedKeys: [-3],
            },
            toolbar: {
                show: true,
                list: ['ALL', 'REVERSE', 'CLEAR']
            },
            height: '300px',
            data: []
        });
        $.ajax({
            url: "{% url 'users:dept_users' %}",
            type: "GET",
            data:{'paper_code':data1.paper_code},
            success: function (ret) {
                var node = ret;
                demo1.update({
                    data: node.data,
                    autoRow: true,
                });
                // 顺便对radio进行回显：
                $("input[name=independence][value='0']").attr("checked", data1.user_Independence == 0 ? true : false);
                $("input[name=independence][value='1']").attr("checked", data1.user_Independence == 1 ? true : false);
                form.render();
            },
            error: function () {
            }
        });

        // 这里得把switch的状态弄对，不然，如果他创建就停用，数据就传不过去了
        form.on("submit(pushUser)", function (data) {
            if(JSON.stringify(data.field)=='{}'){
                okLayer.redCrossMsg('请填写项目人员信息！')
                return false;
            }
            okUtils.ajax("/project/project_insertuser/", "post",data.field, true).done(function (response) {
                okLayer.greenTickMsg(response.msg);
            }).fail(function (error) {
                // 这里已经有提示了
            });
            return false;
        });
        $(".layui-btn-primary").click(function () {
            let index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
            parent.layui.table.reload('tableId');
            parent.layer.close(index);
        });
    });
    };
</script>
</body>
</html>
